{{extend "layout.html"}}
{{block content}}
{{use "mootools"}}
{{link "doto.js"}}
{{link "hoverbox.js"}}
<form id="form" method="post" action="{{=url_for('doto.views.doto_add')}}">
<div class="info" id="doto-input">
    <span id="hover_control">Filter <img src="{{=url_for_static('arrdown.gif')}}"</span>
    <input id="todo" type="text" name="todo" class="type-text"/>
    <input type="submit" name="add" value="Add"/>
</div>
</form>
<div id="hover_control_smarthbox">
<ul>
	<li><a href="#" onclick="return load_tasks()">Tasks</a></li>
	<li><a href="#" onclick="return load_tasks({filter:'all'})">Tasks + Completed</a></li>
</ul>
</div>

<div id="todos">
<ul id="tasklist">
</ul>
</div>
<script type="text/javascript">

var load_tasks = function(args){
    var h = new Hash(args||{});
    $('tasklist').load("{{=url_for('doto.views.doto_load')}}"+'?'+h.toQueryString());
    smartBox.closeBox();
};

var smartBox;
//global variables
//add form send event
window.addEvent('domready', function() {
    init_images("{{=settings.wsgi_middleware_staticfiles.STATIC_URL.rstrip('/')}}");
    form_send($('form'));
    var tasklist = $('tasklist');
    
    var req = new Request({
        method: 'get',
        url: "{{=url_for('doto.views.doto_load')}}",
        initialDelay: 0,
        onSuccess: function(response){
            $('tasklist').set('html', response);
        }
    }).startTimer();
    
    //add hoverbox process
    
    smartBox = new SmartHoverBox({ //initiate your new class here
      yOffset: 4,
      lockX: 'left' //set your options in here
    });
    
});
</script>
{{end}}